<template>
  <div :class="['el-scrollbar-view', appShowIcon ? 'active' : '']" @click.stop="closeApp">
    <div :class="['el-scrollbar-box flex flex-direction', appShowIcon ? 'active' : '']">
      <div class="el-scrollbar-img">
        <img src="~@/assets/logo.png" alt="logo" />
        <h6>宇时</h6>
      </div>

      <div class="layout-aside flex-1">
        <div
          :class="['layout-aside-list', index === timeIndex ? 'active' : '']"
          v-for="(item, index) in list"
          :key="index"
          @click="goToNav(item, index)"
        >
          <i :class="item.img"></i>
          <span>{{ item.title }}</span>
        </div>
      </div>
      <div class="el-scrollbar-footer">
        <div
          :class="['menu', index === menuIndex ? 'active' : '']"
          v-for="(item, index) in menuList"
          :key="index"
          @click="goBoNav(item, index)"
        >
          <img :src="item.img" alt="" />
          <span>{{ item.title }}</span>
        </div>
        <div class="menu pore" @click.stop="">
          <img src="@assets/chat/icon-ke.png" alt="" />
          <span>联系客服</span>
          <div class="menuModel">
            <img src="@assets/rem.png" alt="" />
            <h6>添加客服二维码</h6>
            <div class="dl">服务时间：早上 9:00 - 22:00</div>
            <div class="dl">联系电话：15989208135</div>
          </div>
        </div>
        <div class="balance">
          <div class="balance-item" @click="goBoNav({ path: '/chatgpt/MemberPage' })">
            <div class="a">
              <span>对话：{{ limitList().askNumber || '' }}条</span>
              <span>充值</span>
            </div>
          </div>
          <div class="balance-item" @click="goBoNav({ path: '/chatgpt/MemberPage' })">
            <div class="a">
              <span>绘画：{{ limitList().drawNumber || '' }}条</span>
              <span>充值</span>
            </div>
          </div>
        </div>
      </div>

      <!-- <div class="header-index-wide">
          <div v-if="device !== 'mobile'">
            <s-menu
              mode="horizontal"
              :menu="menus"
              :theme="theme"
              @updateMenuTitle="handleUpdateMenuTitle"
            ></s-menu>
          </div>
      </div> -->
    </div>
    <!-- 顶部导航栏模式 -->
    <div class="header-contain">
      <div :class="['header-pos', !headerPosShow ? 'active' : '']">
        <div :class="['top-nav-header-index', theme]">
          <div class="header-index-wide">
            <div class="appLTion" @click="closeApp">
              <!-- <img src="../../assets/chat/yingyong.png" alt="" /> -->
            </div>
            <div class="header-index-left" :style="topMenuStyle.headerIndexLeft">
              <div v-if="device !== 'mobile'" :style="topMenuStyle.topSmenuStyle">
                <div class="moreLanBox">
                  <div class="moreLan">更多栏目</div>
                  <s-menu
                    mode="horizontal"
                    :menu="menus"
                    :theme="theme"
                    @updateMenuTitle="handleUpdateMenuTitle"
                  ></s-menu>
                </div>
              </div>
            </div>
            <user-menu class="header-index-right" :theme="theme" :style="topMenuStyle.headerIndexRight" />
          </div>
        </div>
      </div>
    </div>
    <!-- <iframe src="http://meta.universetime.com.cn/login" style="width: 1000px;height: 500px;"></iframe> -->
  </div>
</template>

<script>
import UserMenu from '../tools/UserMenu'
import SMenu from '../menu/'
import Logo from '../tools/Logo'
import { mixin } from '@/utils/mixin.js'
import { mapActions, mapGetters, mapState } from 'vuex'
export default {
  name: 'GlobalHeader',
  components: {
    UserMenu,
    SMenu,
    Logo,
  },
  mixins: [mixin],
  props: {
    mode: {
      type: String,
      // sidemenu, topmenu
      default: 'sidemenu',
    },
    menus: {
      type: Array,
      required: true,
    },
    theme: {
      type: String,
      required: false,
      default: 'dark',
    },
    collapsed: {
      type: Boolean,
      required: false,
      default: false,
    },
    device: {
      type: String,
      required: false,
      default: 'desktop',
    },
  },
  data() {
    return {
      appShowIcon: false,
      timeIndex: 0,
      menuIndex: -1,
      screenHeightBg: '',
      list: [
        {
          img: 'iconfont icon-shouye1',
          title: 'AI首页',
          path: '/dashboard/analysis',
        },
        {
          img: 'iconfont icon-24gf-bubblesDots6',
          title: 'AI聊天',
          path: '/chatgpt/ChatModel',
        },
        {
          img: 'iconfont icon-V',
          title: 'AI绘画',
          path: '/chatgpt/ChatModelDraw',
        },
        {
          img: 'iconfont icon-V',
          title: '绘画广场',
          path: '/chatgpt/PaintingSquare',
        },
        {
          img: 'iconfont icon-chuangzuo',
          title: 'AI应用',
          path: '/chatgpt/component/AuthoringTool',
        },
        {
          img: 'iconfont icon-moxingguanli',
          title: '技能模型',
          path: '/chatgpt/TechnicalModel',
        },
        {
          img: 'iconfont icon-ic_ai',
          title: '数字人',
          path: '/chatgpt/component/ThirdPartyUniver',
        },
        {
          img: 'iconfont icon-jiaoyuzhiye',
          title: 'AI职业教育',
          path: '',
        },
      ],
      menuList: [
        // {
        //   img: require('@assets/chat/icon-hui.png'),
        //   title: '时长会员',
        //   path: '/chatgpt/MemberPage',
        // },
        {
          img: require('@assets/chat/icon-qian.png'),
          title: '套餐充值',
          path: '/chatgpt/MemberPage',
        },
        {
          img: require('@assets/chat/icon-fen.png'),
          title: '分销推广',
          path: '/chatgpt/DistriBution',
        },
        {
          img: require('@assets/chat/caogao.png'),
          title: '建议反馈',
          path: '/chatgpt/RecomMendation',
        },
      ],
      headerBarFixed: false,
      //update-begin--author:sunjianlei---date:20190508------for: 顶部导航栏过长时显示更多按钮-----
      topMenuStyle: {
        headerIndexLeft: {},
        topNavHeader: {},
        headerIndexRight: {},
        topSmenuStyle: {},
      },
      chatStatus: '',
      navPath: '',
      limitListData: {},
      headerPosShow: true,
    }
  },
  watch: {
    /** 监听设备变化 */
    device() {
      if (this.mode === 'topmenu') {
        this.buildTopMenuStyle()
      }
    },
    /** 监听导航栏模式变化 */
    mode(newVal) {
      if (newVal === 'topmenu') {
        this.buildTopMenuStyle()
      }
    },
    '$route.path': {
      handler(toPath, fromPath) {
        // console.log('当前页面路由地址：' + toPath)
        // var array = toPath.split('/')
        // var path = array[array.length - 1]
        // console.log("array",path)
        console.log('this.$route.query.code',this.$route.query.code)
        this.navPath = toPath
        var that = this
        this.$nextTick(function () {
          this.list.forEach(function (item, index) {
            if (item.path === toPath) {
              that.timeIndex = index
              return false
            }
          })
          this.menuList.forEach(function (item, index) {
            if (item.path === toPath) {
              that.menuIndex = index
              return false
            }
          })
          var listArray = this.menuList.concat(this.list)
          // 返回值等于-1 说明数组Arr中不存在id为date的对象
          if (listArray.findIndex((item) => item.path === toPath) === -1) {
            that.headerPosShow = false
          } else {
            that.headerPosShow = true
          }
        })

        // console.log('上一个路由地址：' + fromPath)
      },
      deep: true, // 深度监听
      immediate: true, // 第一次初始化渲染就可以监听到
    },
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
    //update-begin--author:sunjianlei---date:20190508------for: 顶部导航栏过长时显示更多按钮-----
    if (this.mode === 'topmenu') {
      this.buildTopMenuStyle()
    }
    //update-end--author:sunjianlei---date:20190508------for: 顶部导航栏过长时显示更多按钮-----

    this.$nextTick(function () {
      this.screenWidth = window.innerWidth
      this.screenHeight = window.innerHeight
      this.screenHeightBg = this.screenHeight + 'px'
      
    })
  },
  methods: {
    ...mapGetters(['limitList']),
    //关闭菜单栏
    closeApp() {
      this.appShowIcon = !this.appShowIcon
    },
    goToNav(item, index) {
      this.menuIndex = -1
      if (item.path === '') {
        this.$message.info('开发中')
      } else {
        if (this.navPath !== item.path) {
          this.$router.push({ path: item.path })
        }
      }
    },
    goBoNav(item, index) {
      this.timeIndex = -1
      if (item.path === '') {
        this.$message.info('开发中')
      } else {
        if (this.navPath !== item.path) {
          this.$router.push({ path: item.path })
        }
      }
    },
    handleScroll() {
      if (this.autoHideHeader) {
        let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        if (scrollTop > 100) {
          this.headerBarFixed = true
        } else {
          this.headerBarFixed = false
        }
      } else {
        this.headerBarFixed = false
      }
    },
    toggle() {
      this.$emit('toggle')
    },
    //update-begin--author:sunjianlei---date:20190508------for: 顶部导航栏过长时显示更多按钮-----
    buildTopMenuStyle() {
      if (this.mode === 'topmenu') {
        if (this.device === 'mobile') {
          // 手机端需要清空样式，否则显示会错乱
          this.topMenuStyle.topNavHeader = {}
          this.topMenuStyle.topSmenuStyle = {}
          this.topMenuStyle.headerIndexRight = {}
          this.topMenuStyle.headerIndexLeft = {}
        } else {
          let rightWidth = '400px'
          this.topMenuStyle.topNavHeader = { 'min-width': '165px' }
          this.topMenuStyle.topSmenuStyle = { width: 'calc(100% - 165px)' }
          this.topMenuStyle.headerIndexRight = { 'min-width': rightWidth, 'white-space': 'nowrap' }
          this.topMenuStyle.headerIndexLeft = { width: `calc(100% - ${rightWidth})` }
        }
      }
    },
    //update-begin--author:sunjianlei---date:20190508------for: 顶部导航栏过长时显示更多按钮-----

    // update-begin-author:sunjianlei date:20210508 for: 修复动态功能测试菜单、带参数菜单标题错误、展开错误的问题
    handleUpdateMenuTitle(value) {
      this.$emit('updateMenuTitle', value)
    },
    // update-end-author:sunjianlei date:20210508 for: 修复动态功能测试菜单、带参数菜单标题错误、展开错误的问题
  },
}
</script>

<style lang="less" scoped>
.header-contain {
  height: 64px;
  .header-pos {
    position: fixed;
    right: 0;
    top: 0;
    // background: white;
    background: #f7f7f7;
    // z-index: 999;
    width: 307px;
    padding-left: 10px;
    border-bottom-left-radius: 20px;
    &.active{
      background: rgba(0, 0, 0, 0.2);
      /deep/.ant-menu,/deep/.ant-menu-submenu-title{
        background: unset!important;
      }
    }
  }
}
.el-scrollbar-view {
  // width: 164px;
  border-right: 1px solid #e5e3e3;
  z-index: 999;
  background: white;
  float: left;
  min-width: 144px;
  .el-scrollbar-box {
    padding: 10px 13px;
    box-sizing: border-box;
    // width: 138px;
    position: fixed;
    // background: white;
    top: 0;
    left: 0;
    bottom: 0;
    // padding-left: 19px;
    // border-right: 1px solid #e5e3e3;
    .el-scrollbar-img {
      text-align: center;
      img {
        width: 99px;
      }
      h6 {
        font-size: 18px;
        font-weight: 700;
      }
    }
  }
}
.layout-aside {
  margin-top: 10px;
  .layout-aside-list {
    align-items: center;
    border-radius: 100px;
    display: flex;
    height: 44px;
    padding-left: 9px;
    margin: 10px 0;
    cursor: pointer;
    i {
      font-size: 18px;
      color: #424141;
    }
    span {
      font-weight: 700;
      font-size: 14px;
      color: black;
      margin-left: 10px;
    }
    &.active {
      background: linear-gradient(90deg, #938bff, #ff97f2);
      span,
      i {
        color: white;
      }
    }
  }
}

.el-scrollbar-footer {
  // position: absolute;
  // bottom: 0;
  // left: 0;
  // right: 0;
  // margin: 10px;
  .menu {
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    height: 40px;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding: 0 10px;
    background-color: #f7f7f7;
    width: 120px;
    img {
      width: 20px;
      height: 20px;
    }
    span {
      font-size: 14px;
      color: black;
      margin-left: 5px;
    }
    &.active {
      background-color: #edfdff;
      span {
        color: #18bfd0;
      }
    }
    &.pore {
      position: relative;
      .menuModel{
        display: none;
        opacity: 0;
        transition: all 0.3s;
      }
      &:hover{

        .menuModel{
          display: block;
          opacity: 1;
        }
      }
      .menuModel {
        position: absolute;
        left: 129px;
        bottom: 0;
        background: white;
        padding: 20px 40px 10px 40px;
        text-align: center;
        box-shadow: 0px 0px 5px 0px #ccc;
        border-radius: 5px;
        img {
          width: 150px;
          height: 150px;
        }
        h6 {
          font-size: 14px;
          font-weight: bold;
          color: #666;
          margin-top: 10px;
        }
        .dl {
          white-space: nowrap;
          font-size: 13px;
          margin-bottom: 10px;
        }
        &::before {
          position: absolute;
          bottom: 12px;
          left: -4px;
          content: '';
          width: 9px;
          height: 9px;
          background: white;
          transform: rotate(135deg);
          box-shadow: 1px -2px 5px rgba(0, 0, 0, 0.2);
        }
        &::after {
          position: absolute;
          bottom: 7px;
          left: 0;
          content: '';
          width: 20px;
          height: 44px;
          background: white;
        }
      }
    }
  }
}

.moreLanBox {
  display: flex;
  align-items: center;
  width: 110px;
}
.balance {
  .balance-item {
    background-color: #fffbf3;
    border-radius: 8px;
    color: #000;
    font-size: 12px;
    margin-bottom: 10px;
    padding: 7px 8px;
    .a {
      display: flex;
      justify-content: space-between;
      cursor: pointer;
      color: black;
      span:nth-child(2) {
        color: #ffbd5c;
        font-weight: 700;
      }
    }
  }
}
.appLTion {
  display: none;
}
/deep/.ant-avatar-sm {
  width: 40px;
  height: 40px;
  margin: 10px 10px 20px 0 !important;
}
@media screen and (max-width: 767px) {
  .el-scrollbar-view {
    border-right: unset;
    width: unset;
    min-width: unset;
    .el-scrollbar-box {
      background: white;
      opacity: 0;
      transition: all 0.3s;
      left: -100%;
      &.active {
        opacity: 1;
        left: 0;
        z-index: 1;
        box-shadow: 0px 0px 4px 1px #ccc;
      }
      .el-scrollbar-img {
        h6 {
          display: none;
        }
      }
    }
    &.active {
      bottom: 0;
      height: 100%;
      left: 0;
      overflow: auto;
      position: fixed;
      right: 0;
      top: 0;
      background: rgba(0, 0, 0, 0.4);
    }
  }
  .appLTion {
    display: block;
    img {
      width: 27px;
      height: 27px;
    }
  }

  .header-contain {
    .header-pos {
      width: 100%;
      padding-left: 0;
      .header-index-wide {
        align-items: center;
        background: url(../../assets/chat/yingyong.png) no-repeat left;
        background-size: 30px 30px;
        background-color: white;
        background-position: 21px;
        .appLTion {
          margin-left: 20px;
        }
      }
    }
  }
  /deep/.ant-avatar-sm {
    width: 42px;
    height: 42px;
    margin: 10px 0 10px 10px !important;
  }
}
</style>